<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="通知公告" :topheight="navBarHeight"></HeadNav>
		
		<view class="main">
			<view class="main-ctr">
				<!-- noticeTitle -->
				<view class="notice-tit">{{ info.noticeTitle }}</view>
				<view class="notice-time">{{ info.createTime }}</view>
				
				<view class="notice-box">
					<rich-text :nodes="info.noticeContentStr"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { noticeDetailApi } from '@/api/api.js'
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				info: '',
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			async getNotice(id) {
				const res = await noticeDetailApi(id)
				
				this.info = res.data
			}
		},
		onLoad(options) {
			this.getNotice(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		.main {
			
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			margin-top: 30rpx;
			.main-ctr {
				min-height: 876rpx;
				padding: 30rpx 30rpx;
				border-radius: 10rpx;
				background: #fff;
				.notice-tit {
					color: #333;
					font-size: 28rpx;
				}
				.notice-time {
					margin-top: 10rpx;
					margin-bottom: 20rpx;
					padding-bottom: 10rpx;
					border-bottom: 2rpx solid #EEEEEE;
					color: #999;
					font-size: 24rpx;
				}
				.notice-box {
					word-break: break-all
				}
				
				.group-item {
					height: 100rpx;
					border-bottom: 2rpx solid #eee;
				}
			}
		}
	}
</style>